<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>商家列表</p>
		</header>
		<!-- 商家列表部分 -->
		<ul class="business">
			<li v-for="item in businessList" :key="item.businessId"
			@click="jumpToBusinessInfo(item.businessId)">
				<div class="business-img">
					<img v-bind:src="item.businessImg">
					<div class="business-img-quantity" v-if="item.quantity>0">{{item.quantity}}</div>
				</div>
				<div class="business-info">
					<h3>{{item.businessName}}</h3>
					<p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
					<p>{{item.businessExplain}}</p>
				</div>	
			</li>
			
		</ul>
			<!-- 底部菜单部分 -->
				<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	export default {
		name:'BusinessList',
		components: {
			Footer
		},
		data:function(){
			return {
				businessList:[],
				carts:[]
			}
		},
		// 页面载入时，通过生命周期函数来拉取后台商家数据
		created(){
			// 通过路由接受首页index传递过来的商家类型
			let orderTypeId = this.$route.query.orderTypeId;
			this.listBusinessByOrderTypeId(orderTypeId);

		},
		methods: {
			// 跳转到商家食品信息页面
			jumpToBusinessInfo:function(businessId){
				this.$router.push({
					path:'/businessInfo',
					query:{
						businessId:businessId
					}
				});
			},
			// 带上要查询的类型id发起请求从后端获取商家列表
			listBusinessByOrderTypeId:function(orderTypeId){
				let that = this;
				let url = 'BusinessController/listBusinessByOrderTypeId';
				this.$axios.get(url+'?orderTypeId='+orderTypeId)
					.then(resp=>{
						that.businessList = resp.data;
						// console.log(that.businessList);
						let user = that.$sessionGet('user');
						// 需要消费者登陆的前提下,才能显示用户在各个商家的购物车添加情况
						if(user!=null){
							that.listCart();
						}
					})
					.catch(error=>{
						console.log(error);
					})
			},
			// 获取用户购物车中的数据
			listCart(){
				let user = this.$sessionGet('user');
				let url = 'CartController/listCart?userId=' + user.userId;
				let that = this;
				this.$axios.get(url)
					.then(resp=>{
						let carts = resp.data;
						// console.log(carts);
						for(let k in that.businessList){
							that.businessList[k].quantity = 0;
							for(let cart of carts){
								if(that.businessList[k].businessId == cart.businessId){
									that.businessList[k].quantity += cart.quantity;
								}
							}
						}
						// 调用数组的变异方法,以更新视图
						that.businessList.sort();
					})
					.catch(err=>{
						console.log(err);
					})
			}
		}
	}
</script>

<style scoped="scoped">
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 商家列表部分 ******************/
	.wrapper .business {
		width: 100%;
		margin-top: 12vw;
		margin-bottom: 14vw;
	}

	.wrapper .business li {
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		border-bottom: solid 1px #DDD;
		user-select: none;
		cursor: pointer;
		display: flex;
		align-items: center;
	}

	.wrapper .business li .business-img {
		/*这里设置为相当定位，成为business-img-quantity元素的父元素*/
		position: relative;
	}

	.wrapper .business li .business-img img {
		width: 20vw;
		height: 20vw;
	}

	.wrapper .business li .business-img .business-img-quantity {
		width: 5vw;
		height: 5vw;
		background-color: red;
		color: #fff;
		font-size: 3.6vw;
		border-radius: 2.5vw;
		display: flex;
		justify-content: center;
		align-items: center;
		/*设置成绝对定位，不占文档流空间*/
		position: absolute;
		right: -1.5vw;
		top: -1.5vw;
	}

	.wrapper .business li .business-info {
		margin-left: 3vw;
	}

	.wrapper .business li .business-info h3 {
		font-size: 3.8vw;
		color: #555;
	}

	.wrapper .business li .business-info p {
		font-size: 3vw;
		color: #888;
		margin-top: 2vw;
	}
</style>
